<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../../element-ui-2.13.0/lib/theme-chalk/index.css" />
  <script type="text/javascript" src="../../vue/vue-v2.6.10.js"></script>
  <script type="text/javascript" src="../../element-ui-2.13.0/lib/index.js"></script>
  <script type="text/javascript" src="../../vue/axios-0.18.0.js"></script>
</head>

<body>
  <div id="app">
    <el-tag type="info" v-if="inputVisible" effect="dark" closable="true" :disable-transitions="disable" @close="handleClose">添加用户</el-tag>
    <div v-if="inputVisible">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="登录名" prop="username">
          <el-input v-model="ruleForm.username" style="width: 210px;"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="ruleForm.password" style="width: 210px;"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="name">
          <el-input v-model="ruleForm.name" style="width: 210px;"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="ruleForm.phone" style="width: 210px;"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model.number="ruleForm.age" style="width: 210px;"></el-input>
        </el-form-item>
        <el-form-item label="性別" prop="sex">
          <el-radio-group v-model="ruleForm.sex">
            <el-radio label="0">男</el-radio>
            <el-radio label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="ruleForm.status">
            <el-radio label="1">启用</el-radio>
            <el-radio label="2">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-select v-model="ruleForm.role" placeholder="请选择活动区域">
            <el-option label="管理员" value="1"></el-option>
            <el-option label="总经理" value="2"></el-option>
            <el-option label="用户" value="3"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</body>
<script>
  axios.defaults.withCredentials = true
  new Vue({
    el: "#app",
    data: {
      ruleForm: {
        username: '',
        password: '',
        name: '',
        phone: '',
        status: '',
        role: '',
        age: '',
        sex: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 3, max: 11, message: '长度在 3 到 11 个字符', trigger: 'blur' }
        ],
        role: [
          { required: true, message: '请选择角色', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' }
        ],
        phone: [
          {
            required: true,
            message: '请输入手机号码',
            trigger: 'blur'
          },
          {
            validator: function (rule, value, callback) {
              if (/^1[34578]\d{9}$/.test(value) == false) {
                callback(new Error("请输入正确的手机号"));
              } else {
                callback();
              }
            }, trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }, {
            min: 6,
            max: 30,
            message: '长度在 6 到 30 个字符'
          }, {
            pattern: /^(\w){6,20}$/,
            message: '只能输入6-20个字母、数字、下划线'
          }
        ],
        status: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ],
        sex: [
          { required: true, message: '请选择性別', trigger: 'change' }
        ],
        age: [
          { required: true, message: '年龄不能为空', trigger: 'blur' },
          {
            validator: function (rule, value, callback) {
              if (!Number.isInteger(value)) {
                callback(new Error('请输入数字值'));
              } else {
                if (value < 18) {
                  callback(new Error('必须年满18岁'));
                } else {
                  callback();
                }
              }
            }, trigger: 'blur'
          }
        ] 
      },
      /*选项卡*/
      inputVisible: true,
      disable: false,
    },
    methods: {
   
      handleClose() {
          this.inputVisible = false;
          // location.href='index.html';
          history.back();
      },
 
      submitForm(formName) {
        this.$refs[formName].validate(valid=>{
           if(valid){
              let params = new URLSearchParams();
              for(let i in this.ruleForm){
                params.append(i,this.ruleForm[i]);
              }    
              axios.post('http://localhost/user?method=addUser',params).then(resp=>{
                  if(resp.data.code==200){
                      this.$message.success(resp.data.message);
                  }else{
                     this.$message.warning(resp.data.message);
                  }
                  setTimeout(() => {
                    location.href='index.html';
                  }, 2000);
              });
           }else{
             this.$message.warning('表单验证未通过!');
           }
        });
      },
     
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  })
</script>

</html>